<template>
  <div style="position:relative">
    <!-- :show-header="showHeader" :row-style="rowStyle" :cell-style="cellStyle"
    :header-cell-style="headerCellStyle" :header-row-style="headerRowStyle" -->
    <el-table ref="table" :data="compTableData2" empty-text="暂无数据" 
      border stripe size="mini" :tooltip-effect="toolTipEffect"
      v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" :row-class-name="tableRowClassName"
      @cell-click="handleCell" @row-click="handleRow"
      @cell-mouse-enter="handleCellMouseEnter"
      @cell-mouse-leave="handleCellMouseLeave" @selection-change="handleSelectionChange">
      <!-- 选中 不选中 columnsType 是个对象  可以这样 :type="columnsType&&columnsType.type"  -->
      <!-- 不能这样 :type="columnsType.type&&columnsType.type != ''"  这样判断结果是true(:type="true")   而type绑定的应该是个字符串('selector')  -->
      <el-table-column v-if="columnsType.type != ''" :type="columnsType.type" 
      :width="columnsType.width" align="center" :selectable="handleSelectable"></el-table-column>
      <!-- 表头 -->
      <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop"
        :label="item.label" :width="item.width || ''" :min-width="item.minWidth|| ''"
        :align="item.align || 'left'" :sortable="item.sortable || false"
        :show-overflow-tooltip="showOverflowTooltip"
        v-if="item.checked == undefined || item.checked">
        <!-- item.checked == undefined || item.checked 没有checked属性显示表头  有checked属性 并且值为true 显示表头  只有checked属性值为false时 不显示-->
        <template slot-scope="scope">
          <span>
            <!-- 插槽 处理 性别和操作  :row="scope.row" 这是把一行数据放入 scoped里面   scope.$index 要加$-->
            <slot v-if="item.template" :name="item.prop" :row="scope.row" :index="scope.$index"></slot>
            <!-- <span v-else>{{ scope.row[item.prop] | isEmpty }}</span> -->
            <!-- 这个处理 姓名和年龄 {"id": 0, "name": "姓名0","age":"6岁","sex":0,} | isEmpty(scope.row) -->
            <span v-else >{{ scope.row[item.prop]  }}</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-bottom-selection">
      <slot name="selection"></slot>
    </div>
    <div>
      <span class="bottom-bar-left" v-if="columnsType.type != ''">
        <el-checkbox style="margin: 16px;" v-model="checkAll" :indeterminate="false"
         @change="handleCheckAllChange">全选</el-checkbox>
      </span>
      <!--  :layout="layout" -->
      <el-pagination class="table-page-pagination" 
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
         :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "TablePage",
  data() {
    return {
      checkAll: false,
      toolTipEffect:'dark',
      showOverflowTooltip:true,
      loading:false,
    };
  },
  // 过滤器里不能调用方法
  computed: {
    // 清除 属性值为空的 对象
    compTableData2(){
       // 前面清除 {} 这样的对象  后面是清除 { name:'',age:12} 这样的对象
       return this.compTableData.filter(value => Object.keys(value).length != 0).filter(item => Object.values(item).every(itemValue => itemValue !== ''));
    },
    pageValue: {
      //getter 方法
      get() {
        return this.pageSize;
      },
      set(newValue) {
        return newValue;
      },
    },
  },
  props: {
    compTableData: {
      //表格数据
      type: Array,
      default() {
        return [];
      },
    },
    columns: {
      //表格列
      type: Array,
      default() {
        return [];
      },
    },
    columnsType: {
      //对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮
      type: Object,
      default() {
        return {
          type: "",
          width: "50",
        };
      },
    },
    // layout: {
    //   type: String,
    //   default:"sizes,total,prev,pager,next, jumper",
    //   //total, sizes, prev, pager, next, jumper
    // },
    total: {
      //总条数
      type: Number,
      default: 10,
    },
    currentPage: {
      //当前页
      type: Number,
      default: 1,
    },
    pageSize: {
      //一页显示多少条
      type: Number,
      default: 10,
    },
    headerCellStyle: {
      type: Function,
      default() {
        return {};
      },
    },
    rowStyle: {
      type: Function,
      default() {
        return {};
      },
    },
    handleSelectable: {
      type: Function,
      default(row, index) {
        if (row.attr == 1) {
          return false;
        }
        return true;
      },
    },
    headerRowStyle: {
      type: Function,
      default() {
        return {};
      },
    },
    cellStyle: {
      type: Function,
      default() {
        return "";
      },
    },
    pageBottomClass: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
     tableRowClassName({row,rowIndex}){
           //row.index = rowIndex
           row.index = rowIndex + (this.currentPage - 1) * this.pageSize;
     },
    // 按钮处理 全选  全不选
    handleCheckAllChange() {
      this.$refs["table"].toggleAllSelection();
    },
    // 处理 每页显示多少条数据
    handleSizeChange(val) {
      //每一页显示几条数据
      this.$emit("sizeChange", val);
    },
    // 处理第几页
    handleCurrentChange(val) {
      // 当前第几页
      this.$emit("currentChange", val);
    },
    // 表格头部 处理 选中 不选中
    handleSelectionChange(selection) {
      // 全部选中了 把下面的全选 也变选中 进行联动
      if(selection.length !==0){
        this.checkAll = true;
      }else{
        this.checkAll = false;
      }
      this.$emit("selectionChange", selection);
    },
    // 某一行被点击时会触发事件
    handleRow(row, column, event) {
      this.$emit("rowClick", {
        row,
        column,
        event,
      });
    },
    // 某个单元格被点击时触发事件
    handleCell(row, column, cell, event) {
      this.$emit("cellClick", {
        row,
        column,
        cell,
        event,
      });
    },
    // 单元格 离开 触发的事件
    handleCellMouseLeave(row, column, cell, event) {
      this.$emit("cellMouseLeave", {
        row,
        column,
        cell,
        event,
      });
    },
    // 单元格 进入 hover 触发的事件
    handleCellMouseEnter(row, column, cell, event) {
      this.$emit("cellMouseEnter", {
        row,
        column,
        cell,
        event,
      });
    },
  },
};
</script>
